<div class="modal-header">
  <h3 class="modal-title"><i class="fa fa-clock-o"></i> {{::modal.dataObj.name}}</h3>
</div>
<div class="modal-body">
  <div
      ng-if="!modal.playlistService.playlists || modal.playlistService.playlists.length === 0"
      translate="ALARM.CRATE_PLAYLIST_FIRST">
  </div>

  <div
      ng-if="modal.playlistService.playlists && modal.playlistService.playlists.length"
      ng-repeat="alarm in modal.alarms track by $index" class="row alarm">
    <div class="col-xs-12 col-sm-6">
      <uib-timepicker
          ng-model="alarm.time"
          hour-step="1"
          minute-step="1"
          show-meridian="modal.showMeridian">
      </uib-timepicker>
    </div>
    <div class="col-xs-12 col-sm-6 pull-down">
      <input
          bs-switch
          ng-model="alarm.enabled"
          type="checkbox"
          switch-size="medium"
          switch-animate="false"
          switch-on-text="On"
          switch-off-text="Off"
          ng-true-value="true"
          ng-false-value="false">
    </div>
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-12 col-sm-6 pull-down">
      <ui-select
          id="{{alarm.id}}"
          ng-model="alarm.playlist"
          search-enabled="false"
          append-to-body="false"
          theme="bootstrap">
        <ui-select-match
            class="ui-select-match"
            placeholder="{{'COMMON.CHOOSE_PLAYLIST' | translate}}">
          {{$select.selected}}
        </ui-select-match>
        <ui-select-choices
            class="ui-select-choices"
            repeat="playlist in modal.playlistService.playlists track by $index">
          <div ng-bind-html="playlist"></div>
        </ui-select-choices>
      </ui-select>
    </div>
    <div class="col-xs-12 col-sm-6 pull-down">
      <button
          class="btn btn-danger"
          ng-click="modal.deleteAlarm(alarm)">
        <span translate="COMMON.DELETE"></span>
      </button>
    </div>
  </div>
</div>

<div class="modal-footer">
  <button
      ng-if="!modal.playlistService.playlists || modal.playlistService.playlists.length === 0"
      class="btn btn-info"
      ng-click="modal.cancel()">
    <span translate="COMMON.OK"></span>
  </button>

  <div ng-if="modal.playlistService.playlists && modal.playlistService.playlists.length">
    <button
        class="btn btn-warning"
        ng-click="modal.cancel()">
      <span translate="COMMON.CANCEL"></span>
    </button>
    <button
        class="btn btn-info"
        ng-click="modal.add()">
      <span translate="COMMON.ADD"></span>
    </button>
    <button
        class="btn btn-info"
        ng-click="modal.save()">
      <span translate="COMMON.SAVE"></span>
    </button>
  </div>
</div>
